<template>
  <div class="message" v-if="visible">
    <div class="content">
      <i class="el-icon-close close-icon" @click="visible = false"></i>
      <p class="order-title">{{title}}</p>

      <div>{{content}}</div>

      <div>
        <el-button @click="clickConfirm">确认</el-button>
        <el-button @click="clickCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      visible: false,
      resolve: "",
      reject: "",
      title: "提示",
      content: "内容数据",
    };
  },
  mounted() {
    // this.close()
  },
  methods: {
    /* close() {
      window.setTimeout(() => {
        this.visible = false;
      }, this.time);
    }, */
    clickConfirm() {
      this.visible = false;
      this.resolve("confirm");
    },
    clickCancel() {
      this.visible = false;
      this.reject("cancel");
    },

    showMsgBox: function () {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
  },
};
</script>
<style scoped>
.message {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
}
.content {
  width: 200px;
  height: 300px;
  background-color: #fff;
  border-radius: 18px;
  margin: 15vh auto 0;
  position: relative;
  text-align: center;
}
.close-icon {
  font-size: 29px;
  color: #999999;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.order-title {
  font-size: 36px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #585858;
  margin: 100px auto 50px;
  text-align: center;
}
</style>